<template>
  <div class="box">
    <div class="notice_wrapper">
      <div class="notice_views">
        <div class="notice_top">
          <h2 style="color: rgb(0, 114, 198)">{{ notice.noticeTitle }}</h2>
          <p style="color: rgb(0, 77, 140)">发布时间：{{ notice.createTime }}</p>
        </div>
        <span class="notice_content">
        <div style="width: 600px">
      <p v-html="notice.noticeContent"></p>
        </div>
      <br/>
      <br/>
      <br/>
      <br/>

        <p style="text-align: right;">&nbsp;&nbsp;&nbsp;{{ notice.createBy }}</p>
        <p style="text-align: right;">{{ notice.createTime | filterTime }}</p>
    
</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  img {
    width: 100%;
  }
</style>


<script>
  export default {
    data() {
      return {
        notice: {},
      };
    },
    created() {
      this.onGetNoticeHandler();
    },

    filters: {
      filterContent(val) {
        //这里有三个方法，一个是正则，一个是用v-text,还有一个是v-html
        //如果是v-text就在<p>标签上直接<p v-text="notice.noticeContent">
        //v-html是<p v-html="notice.noticeContent"></p>
        return val.replace(/<.>/g,);
      },
      filterTime(val) {
        var timearr = val.replace(" ", ":").replace(/\:/g, "-").split("-");
        var timestr =
          timearr[0] + "年" + Number(timearr[1]) + "月" + timearr[2] + "日";

        return timestr;
      },
    },

    methods: {
      onGetNoticeHandler() {

        var notice = JSON.parse(localStorage.getItem('notice'))
        this.notice = notice

        // this.notice = params;
        // console.log(this.notice);
      },

    },
  };
</script>

<style>
  .box {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  .notice_wrapper {
    width: 800px;
    height: auto;
    margin: 20px auto;
    border: 1px solid #cccccc;
  }

  .notice_views {
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .notice_top {
    text-align: center;
  }

  .h2 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
  }

  .notice_content {
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: normal;
    text-indent: 2em;
    padding: 12px 15px;
  }

  .notice_footer {
    float: right;
  }

  .p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
</style>
